<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row class="myBox" id="myLeftHeight">
          <el-col :span="24" class="myTitle">
            <span class="myTitleText">设备实时运行参数</span>
            &nbsp;&nbsp;
            责任人 : <span>{{dutyName}}</span>
            &nbsp;&nbsp;
            联系电话 : <span>{{dutyPhone}}</span>
          </el-col>
          <el-col :span="24" class="myPaddingTopBottom_20px myHeight_340px">
            <ul class="myList" v-for="item in devParasList">
              <li v-if="item.alarm_level == 0" :title="item.dev_para_name">
                <img class="myImg" v-if="paraTypeIconList[item.para_type]"
                :src="paraTypeIconList[item.para_type] + '_' + (item.alarm_level || 0) +'.png'"/>
                <img class="myImg" v-else src="static/images/err.png"/>
                <span class="myTextColor">{{item.display_val}}</span>
                <span class="myText">{{item.dev_para_name}}</span>
              </li>

              <li v-else :title="item.dev_para_name">
                <img class="myImg" v-if="paraTypeIconList[item.para_type]"
                :src="paraTypeIconList[item.para_type] + '_' + (item.alarm_level || 0) +'.png'"/>
                <img class="myImg" v-else src="static/images/err.png"/>
                <span class="myTextColor">{{item.alarm_level | alarmStatus}}</span>
                <span class="myText">{{item.dev_para_name}}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row class="myBox" id="myRightHeight">
          <el-col :span="24" class="myTitle">
            <span class="myTitleText">{{devRoomName}}环境实时参数</span>
          </el-col>
          <el-col :span="24" class="myPaddingTopBottom_20px myHeight_340px">
            <ul class="myListRight" v-for="item in envParasList">
              <li v-if="item.para_type == 1 || item.para_type == 2">
                <span>
                  <img class="myImg" v-if="paraTypeIconList[item.para_type]" 
                    :src="paraTypeIconList[item.para_type] + '_' + (item.alarm_level || 0) +'.png'"/>
                  <img class="myImg" v-else src="static/images/err.png"/>
                </span>
                <span>
                  <span>{{item.dev_para_name}}</span>
                  <span>{{item.display_val}}</span>
                </span>
              </li>
             <li v-else>
                <span>
                  <img class="myImg" v-if="paraTypeIconList[item.para_type]"
                  :src="paraTypeIconList[item.para_type] + '_' + (item.alarm_level || 0) +'.png'"/>
                  <img class="myImg" v-else src="static/images/err.png"/>
                </span>
                <span>
                  <span>{{item.dev_para_name}}</span>
                  <span>{{item.alarm_level | alarmStatus}}</span>
                </span>
              </li>
            </ul>
            <el-button class="myBgGreen myBtn" @click="onVideo">监控视频</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="myPaddingTop_20px">
      <el-col :span="24">
        <el-row class="myBox">
          <el-col :span="24" class="myTitle">
            <span class="myTitleText">设备运行参数历史记录</span>
          </el-col>
          <el-col :span="24">
            <el-row class="mymarginTop_10px" :gutter="10">
             <!--  <el-col :span="4">
                <el-date-picker
                  v-model="selectDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-col> -->
              <el-col :span="4">
                <template>
                  <el-select v-model="paraTypeSelected">
                    <el-option
                     v-for="item in paraTypeList"
                     :key="item.dev_para_id"
                     :label="item.dev_para_name"
                     :value="item.dev_para_id">
                    </el-option>
                  </el-select>
                </template>
              </el-col>
              <el-col :span="4">
                <el-button @click="handleDevParaClick" type="primary" class="myBgGreen">查 询</el-button>
              </el-col>
            </el-row>
            <el-row class="mymarginTop_10px">
              <el-col :span="24">
                <vue-highcharts :options="options" ref="lineChart"></vue-highcharts>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="myPaddingTop_20px">
      <el-col :span="24">
        <el-row class="myBox">
          <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>  
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myPadding_20px{
    padding: 20px;
  }
  .myBorderBottom{
    border-bottom: 1px solid #dbdbdb;
    line-height: 35px;
    font-size: 16px;
    font-weight: 500;
  }
  .el-main {
    padding: 0;
  }
  .el-header, .el-footer {
    padding: 0;
  }
  .mymarginTop_10px{
    padding-top: 10px;
  }
  .myList{
    width: 100%;
  }
  .myList li{
    float: left;
    width: 100px;
    height: 110px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
  }
  .myTextColor{
    display: block;
    width: 100%;
    margin-top: 10px;
    height: 25px;
    line-height: 25px;
    background: #00c2a9;
    color: #fff;
    font-weight: 500;
  }
  .myText{
    color: #333;
    height: 25px;
    line-height: 25px;
    font-weight: 500;
    overflow-x:hidden;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  .myImg{
    width: 50px;
    height: 50px;
  }
  .myListRight{
    width:100%;
  }
  .myListRight li{
    width:150px;
    height: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    cursor: pointer;
  }
  .myListRight li > span{
    display: inline-block;
    width: 50px;
    float: left;
    font-weight: 500;
  }
  .myListRight li > span:nth-child(2){
    padding-top:8px;
    padding-left: 8px;
    width: 100px;
    box-sizing: border-box;
  }
  .myListRight li > span:nth-child(2) span:nth-child(1){
    font-weight: 500;
    display: block;
  }
  .myListRight li > span:nth-child(2) span:nth-child(2){
    font-weight: bold;
    display: block;
    color: #00c2a9;
    font-size: 16px;
  }
  /*一般警告*/
  .myColor_ffa92e{
    background: #ffa92e;
  }
  /*严重警告*/
  .myColor_ff5a2e{
    background: #ff5a2e;
  }


  .myPaddingTop_20px{
    padding-top: 20px;
  }
  .myBox{
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    border:1px solid #e9ebec;
    padding: 15px;
    box-sizing: border-box;
    height: auto;
  }
  .myBox .myTitle{
    border-bottom: 1px solid #e9ebec;
    height: 35px;
    padding-bottom: 15px;
    box-sizing: border-box; 
  }
  .myBox .myTitle .myTitleText{
    color: #2c3e4f;
    font-size: 16px;
    font-weight: 600;
  }
  .myPaddingTopBottom_20px{
    padding: 20px 0;
  }
  .myBtn{
    width: 100%;
    height: 60px;
  }
  .myHeight_340px{
    height: 340px;
    overflow-y: scroll;
  }
  .myHeight_340px::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
</style>

<script>
  import { paraTypeIconList ,alarmLevelList } from '@/api/collect_para';
  import { getDevRoomParasStatus, getDevParaLog } from '@/api/dev_monitor';
  import VueHighcharts from 'vue2-highcharts';

  // var highcharts = require('highcharts');
  // require('highcharts/highcharts-more')(highcharts);
  // require('highcharts/highcharts-3d')(highcharts);

  export default {
     data(){
      return{
        devRoomId: null,
        // 责任人信息
        dutyName: '无',
        dutyPhone: '无',
        devRoomName: '',

        // 设备参数相关
        paraTypeSelected: null,
        paraTypeList: [],
        paraTypeIconList: paraTypeIconList,
        alarmLevelList: alarmLevelList,

        // 环境参数列表
        envParasList: [],
        // 设备参数列表
        devParasList: [],

        selectDate: new Date(),
        value:"",
        options:{
          chart: {
              type: 'areaspline'
          },
          title: {
              text: '',//标题
              style:{
                fontSize:"16px"
              }
          },
          xAxis: {
            tickLength: 5,
            tickmarkPlacement: 'on',
            pointStart:0,
            // categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
            categories: []
          },
          yAxis: {
              title: {
                  text: ''
              },
              labels: {
                  formatter: function () {
                      return this.value;
                  }
              }
          },
          tooltip: {
              pointFormat: '{point.y:,.0f}'
          },
          credits:{
            enabled: false  //去掉版权信息
          },
          plotOptions: {
              area: {
                pointStart: 2002,
                marker: {
                  enabled: false,
                  symbol: 'circle',
                  radius: 2,
                  states: {
                    hover: {
                      enabled: false
                    }
                  }
                }
              },
              series: {
                lineWidth: 0
              }
            },
            series: []
        }
      }
    },
    components: {
        VueHighcharts
    },
    created() {
      this.devRoomId = this.$route.query.id;
      this.devRoomName = this.$route.query.devRoomName;

      let dutyName = this.$route.query.dutyName;
      let dutyPhone = this.$route.query.dutyPhone;
      if (dutyName != '') {
        this.dutyName = dutyName;
      }
      if (dutyPhone != '') {
        this.dutyPhone = dutyPhone;
      }

      this.fecthParasStatus();
      
    },
    mounted(){
      
    },
    filters: {
      alarmStatus(value) {
        return alarmLevelList[value];
      }
    },
    methods:{
      fecthParasStatus() {
        let vm = this;
        getDevRoomParasStatus(this.devRoomId)
        .then(response => {
          let res = response.data;
          console.log(res.length);
          for (let i = 0; i < res.length; i++) {
            let paraType = res[i].para_type;

            if (paraType == 1 || paraType == 2 || paraType == 3 || paraType == 4) {
              vm.envParasList.push(res[i]);
            } else {
              vm.devParasList.push(res[i]);
              vm.paraTypeList.push(res[i]);
              if (vm.paraTypeSelected == null) {
                vm.paraTypeSelected = res[i].dev_para_id;
              }
            }
          }

          vm.fetchDevParaLog(vm);

        })
        .catch(error => {

        })
      },
      dateFormat(date, fmt){
        var o = {
          "y+": date.getFullYear(),
          "M+": date.getMonth() + 1,                 //月份
          "d+": date.getDate(),                    //日
          "h+": date.getHours(),                   //小时
          "m+": date.getMinutes(),                 //分
          "s+": date.getSeconds(),                 //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          "S+": date.getMilliseconds()             //毫秒
        };
        for (var k in o) {
          if (new RegExp("(" + k + ")").test(fmt)){
            if(k == "y+"){
              fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length));
            }
            else if(k=="S+"){
              var lens = RegExp.$1.length;
              lens = lens==1?3:lens;
              fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1,lens));
            }
            else{
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
          }
        }
        return fmt;
      },
      fetchDevParaLog(vm) {
        let curDate = new Date();
        let start = new Date(curDate - 15*60*1000);
        let params = {
          start: this.dateFormat(start, "yyyy-MM-dd hh:mm"),
          end: this.dateFormat(curDate, "yyyy-MM-dd hh:mm")
        };
        getDevParaLog(vm.paraTypeSelected, params)
        .then(response => {
            let res = response.data;

            let x = new Array(res.length);
            let s = new Array(res.length);
            for (let i = 0; i < res.length; i++) {
              x[i] = res[i].day_date;
              s[i] = parseInt(res[i].value);
            }

            let lineChart = vm.$refs.lineChart;
            vm.$refs.lineChart.getChart().xAxis[0].setCategories(x)
            vm.$refs.lineChart.getChart().addSeries({
              name: '设备运行状态',
              data: s,
              color: '#a7eae1',
              marker: {
                enabled: false,  //去掉折线上圆点
              },
            })
        })
        .catch(error => {

        })
      },
      handleDevParaClick() {
        this.$refs.lineChart.removeSeries();
        this.fetchDevParaLog(this);
      },
      onVideo:function(){
        let vm=this;
        vm.$router.push({
          path:"/equipmentVideo",
          query:{
            devRoomId:vm.devRoomId,
            devRoomName:vm.devRoomName
          }
        })
      },
      onBack(){
        this.$router.go(-1);
      }
    }

  }

</script>  



